<template>
  <div id="MerchantRv">
    <!-- 筛选条件 -->
    <el-row>
      <el-col :span="6">
        <label>审核状态</label>
        <el-select v-model="checkTagValue" placeholder="请选择审核状态" @change="fetchMerchantPage">
          <el-option label="等待审核" value="S001-1"></el-option>
          <el-option label="审核未通过" value="S001-2"></el-option>
          <el-option label="审核通过" value="S001-3"></el-option>
        </el-select>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-table :data="merchantList" style="width: 100%;text-align: center;padding-left: 70px">
      <el-table-column prop="merchantId" label="编号" width="80"></el-table-column>
      <el-table-column prop="nickName" label="申请用户" width="150"></el-table-column> <!-- 修改为 nickName -->
      <el-table-column prop="shopName" label="门店名称" width="200"></el-table-column>
      <el-table-column label="门店类型" width="150">
        <template slot-scope="scope">
          {{ getShopTypeText(scope.row.shopType) }}
        </template>
      </el-table-column>
      <el-table-column prop="createDate" label="申请时间" width="200"></el-table-column>
      <el-table-column label="审核状态" width="150">
        <template slot-scope="scope">
          {{ getCheckTagText(scope.row.checkTag) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <!-- 审核按钮 -->
          <el-button class="el-icon-edit"
                     :type="scope.row.checkTag === 'S001-3'? 'text' : 'primary'"
                     :disabled="scope.row.checkTag === 'S001-3'"
                     :class="scope.row.checkTag === 'S001-3'? 'el-icon-check' : ''"
                     @click="scope.row.checkTag!== 'S001-3'? openReviewDialog(scope.row.merchantId) : ''"
          >
            {{ scope.row.checkTag === 'S001-3'? '审核通过' : '审核' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination" style="padding-left: 400px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
        title="商户审核"
        :visible.sync="reviewDialogVisible"
        width="500px"
        @close="closeReviewDialog()">
      <el-form :model="merchant" label-width="120px">
        <el-form-item label="商户编号">
          <el-input v-model="merchant.merchantId" disabled></el-input>
        </el-form-item>
        <el-form-item label="申请用户">
          <el-input v-model="merchant.nickName" disabled></el-input> <!-- 修改为 nickName -->
        </el-form-item>
        <el-form-item label="门店名称">
          <el-input v-model="merchant.shopName" disabled></el-input>
        </el-form-item>
        <el-form-item label="门店类型">
          <el-input v-model="shopTypeText" disabled></el-input>
        </el-form-item>
        <el-form-item label="审核状态">
          <el-select v-model="merchant.checkTag" disabled>
            <el-option label="等待审核" value="S001-1"></el-option>
            <el-option label="审核通过" value="S001-3"></el-option>
            <el-option label="审核未通过" value="S001-2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核理由">
          <el-input v-model="merchant.checkReason" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog - footer">
        <el-button @click="closeReviewDialog">取消</el-button>
        <el-button type="primary" @click="submitReview">通过审核</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'MerchantRv',
  data () {
    return {
      merchantList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      reviewDialogVisible: false,
      reviewForm: {
        merchantId: null
      },
      checkReason: '',
      checkTag: '',
      checkTagValue: 'S001-1', // 可以尝试将其设为 null 或 ""
      merchant: {},
      shopTypeText: ''
    }
  },
  mounted () {
    console.log('checkTagValue:', this.checkTagValue) // 添加调试语句
    this.fetchMerchantPage()
  },
  methods: {
    async fetchMerchantPage () {
      try {
        const response = await this.$axios.get('http://localhost:8090/merchant/page2', {
          params: {
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            shopName: '',
            shopType: '',
            startDate: '',
            endDate: '',
            checkTag: this.checkTagValue
          }
        })
        this.total = response.data.total
        this.merchantList = response.data.rows
      } catch (error) {
        console.error(error)
      }
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.fetchMerchantPage()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.fetchMerchantPage()
    },
    closeReviewDialog () {
      this.reviewDialogVisible = false
      this.merchant = {}
    },
    openReviewDialog (merchantId) {
      this.reviewDialogVisible = true
      this.reviewForm.merchantId = merchantId
      this.$axios.get('http://localhost:8090/merchant/' + merchantId).then(({data}) => {
        this.merchant = data
        this.shopTypeText = this.getShopTypeText(this.merchant.shopType)
      })
    },
    async submitReview () {
      try {
        await this.$axios.put('http://localhost:8090/merchant/review', this.merchant).then(({data}) => {
          this.closeReviewDialog()
          this.fetchMerchantPage()
          if (data) {
            this.$message({
              type: 'success',
              message: '审核成功!'
            })
          }
        })
      } catch (error) {
        console.error(error)
      }
    }
  },
  computed: {
    getCheckTagText () {
      return (checkTag) => {
        switch (checkTag) {
          case 'S001-1':
            return '等待审核'
          case 'S001-2':
            return '审核未通过'
          case 'S001-3':
            return '审核通过'
          default:
            return ''
        }
      }
    },
    getShopTypeText () {
      return (shopType) => {
        // 这里需要根据实际的 shopType 值进行映射，以下是示例
        switch (shopType) {
          case '1':
            return '宝妈/团长'
          case '2':
            return '驿站/快递点'
          case '3':
            return '超市/便利点'
            // 可根据实际情况添加更多映射
          default:
            return shopType
        }
      }
    }
  }
}
</script>

<style scoped>
.pagination {
  margin-top: 20px;
  text-align: right;
}

</style>